<template>
<div id="index">
    <!-- 头部组件 -->
    <div class="top">
        <top></top>
    </div>

    <!-- 中间区域 -->
    <div class="center">
        <div class="main">
            <main-conponent></main-conponent>
        </div>
    </div>

    <!-- 底部组件 -->
    <div class="bottom">
        <bottom></bottom>
    </div>

</div>
</template>

<script>
//  引入头部组件
import top from "../../components/header";
//  引入底部组件
import bottom from "../../components/footer";
//  引入中间组件
import mainConponent from "./components/main.vue";
export default {
    components: {
        top,
        bottom,
        mainConponent,
    },
};
</script>

<style>
.top,
.bottom {
    margin: 10px 0px;
}

.top {
    border-bottom: 1px solid #988a8a;
}

.center {
    background-color: #FFFFFF;
}

.main {
    padding: 10px 20px;
    background-color: white;
    margin: 10px auto;
    width: 1200px;
    min-width: 1200px;
    max-width: 1200px;
}
</style>
